<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Products Compare Application</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>
<script type="text/javascript">
	function myfunc(ob)
	{
		window.location.replace("user_Main.jsp?latitude="+ob.coords.latitude+"&longitude="+ob.coords.longitude);
	}
	function errfunc(ob)
	{
	  alert(ob.message);
	}
	function geoLocation() 
	{
		if(window.navigator.geolocation) 
		{
			window.navigator.geolocation.getCurrentPosition(myfunc, errfunc);
		}
		else
		{
			alert("Geolocation is not supported");
		}
	}		
	</script>
</head>
<body>
	<div data-role="page">
		<div data-role="header" align="center">
			<h1>Products Compare<br>Application</h1>
		</div>
	
		<div data-role="content" align="center">
			<p  style="text-align: center;">This application will calculate your<br>geographic location and will show the<br>nearest Supermarket by that calculation.</p>
		</div>
	
		<div data-role="footer" align="center">
			<h4>Products Compare Application</h4>
		</div>
		<div data-role="content" align="center">
			<a onclick="geoLocation()" type="button" data-theme="e">Get Location</a>
		</div>
	</div>
</body>
</html>